<template>
	<view class="" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/winter_goodpoor_bgc.png)','background-size':'100%',}">

		<view class="padding-top-80 padding-left-30">
			<image class="w-80 h-80" :src="Imgbase + '/winter_goodpoor_img1.png'" mode="aspectFit" @click="back">
			</image>
		</view>

		<view class="Afont margin-auto w-700 padding-top-20">
			<u-subsection mode="subsection" :list="falist" :current="curNow" @change="sectionChange"
				activeColor="#5C5C92"></u-subsection>
		</view>

		<view class="padding-top-30 padding-left-10 Afont padding-bottom-20">
			<view class="df alc font-35 overhid h-80">
				<view class="w-150 text-center h-50" :class="type==1?'typeon':'typeoff'" @click="typego(1)">
					发布中

					<view class="w-50 h-6 margin-auto margin-top-15" style="background-color: #5C5C92;" v-if="type==1">

					</view>
				</view>
				<view class="w-150 text-center h-50" :class="type==2?'typeon':'typeoff'" @click="typego(2)">
					成交墙

					<view class="w-50 h-6 margin-auto margin-top-15" style="background-color: #5C5C92;" v-if="type==2">

					</view>
				</view>
			</view>

			<view class="padding-top-20">
				<view class="df alc font-30 overhid h-80">
					<view class="w-150 text-center h-50" :class="status==0?'typeon':'typeoff'" @click="statusgo(0)">
						全部
					</view>
					<view class="w-150 text-center h-50" :class="status==1?'typeon':'typeoff'" @click="statusgo(1)">
						我发布的
					</view>
					<view class="w-150 text-center h-50" :class="status==2?'typeon':'typeoff'" @click="statusgo(2)"
						v-if="curNow !== 0 || type !== 1">
						我参与的
					</view>
				</view>
			</view>
		</view>



		<view class="w100 overhid boxitem padding-20 margin-bottom-40 Afont" v-for="(item,index) in list" :key="index"
			style="padding-right: 0;" @click="godetail(item.id)">
			<view class="flex-between padding-left-20">
				<view class="df alc">
					<view class="w-90 h-90">
						<image class="w100 h100 radius-45" :src="item.user.avatar" mode="aspectFill"></image>
					</view>

					<view class="padding-left-10 w100">
						<!-- 发布中 -->
						<view class="padding-bottom-10 font-24 w100 one-line" v-if="type == 1">
							{{item.user.nickname}}
						</view>

						<!-- 成交墙 -->
						<view class="padding-bottom-10 font-24 w-250 one-line" v-else>
							{{item.user.nickname}}
						</view>
						<view class="font-20" style="color: #a2a2a2;">
							{{item.create_at}}
						</view>
					</view>
				</view>

				<view class="font-22" v-if="item.rise > 0 && type == 1">
					高于建议价{{item.rise}}%
				</view>

				<view class="" v-if="type == 2 && curNow == 0">
					<view class="df alc">
						<view class="w-90 h-90">
							<image class="w100 h100 radius-45" :src="item.buyer.avatar" mode="aspectFill"></image>
						</view>

						<view class="padding-left-10 w-250">
							<view class="padding-bottom-10 font-24 w100 one-line">
								{{item.buyer.name}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="padding-top-20 w100 overhid">

				<scroll-view scroll-y class="w100" scroll-with-animation style="max-height: 600rpx;overflow: hidden;">
					<view class="w-167 h-230 radius-10  margin-bottom-20 bagitem"
						style="float: left;position: relative;" v-for="(it,idx) in item.goods_list" :key="idx"
						:style="{background:'url('+Imgbase+'/new_goodpoord_img3.png)','background-size':'100% 100%',}">
						<image class="w100 h-150 radius-10" style="border: 4rpx solid #8A5E51;" :src="it.adimage"
							mode="aspectFill">
						</image>

						<view class="w100 one-line font-20 padding-left-10 padding-right-10">
							{{it.goods_name}}
						</view>

						<view class="w100  padding-left-10 padding-right-10 font-20 padding-top-10">
							数量： {{it.num}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="padding-top-20 padding-left-30 df jc-sb">
				<view class="" v-if="status !== 4 && curNow == 1">
					<view class="padding-bottom-10 padding-left-15">
						当前参与{{item.join_num?item.join_num:item.number}}/{{item.number}}
					</view>
					<view class="rate w-300">
						<view class="rate_two "
							:style="[{width:item.join_num?item.join_num/item.number*100 + '%':'100%'}]">

						</view>
					</view>
				</view>

				<view class="h-60 padding-top-25 font-26" v-else>
					支付时,平台将补贴0.3%
				</view>

				<view class="text-right">
					<view class="">
						<text class="font-20 padding-right-15" style="color: #a2a2a2;">共{{item.number}}件 出售价:</text>
						<text class="font-36" style="color: #E60000;">￥{{item.price?item.price:item.cost}}</text>
					</view>

					<view class="" v-if="curNow == 0">
						<text class="font-20 padding-right-15" style="color: #a2a2a2;">建议价:</text>
						<text class="font-36" style="color: #E60000;">￥{{item.back_price}}</text>
					</view>
				</view>

			</view>
		</view>
		<view class="h-200">

		</view>

		<view class="text-center Afont font-35 radius-12 w-270 h-80 lh-55 fixbtn" @click="gocreate(curNow + 1)">
			{{curNow==1?"发布diy盲盒":"发布中古交易"}}
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				page: 1,
				list: [],
				type: 1,
				status: 0,
				falist: ['中古交易', 'DIY商城'],
				curNow: 0,
			}
		},
		onLoad(e) {

		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
			this.list = []
			this.page = 1

			if (this.curNow == 1) {
				this.userPoorList()
			} else {
				this.userGoodsList()
			}
		},
		onReachBottom() {
			let _this = this
			this.page++
			if (this.curNow == 1) {
				this.userPoorList()
			} else {
				this.userGoodsList()
			}
		},
		methods: {
			// 标签
			sectionChange(index) {
				let _this = this
				if (index == 1) {
					_this.$refs.uToast.show({
						message: "功能正在开发中",
					})
					return
				}

				console.log(index)
				this.curNow = index;
				this.list = []
				this.page = 1
				this.status = 0
				this.type = 1

				if (index == 1) {
					this.userPoorList()
				} else {
					this.userGoodsList()
				}
			},
			back() {
				uni.navigateBack()
			},
			// 一级分类
			typego(e) {
				this.list = []
				this.type = e
				this.status = 0
				this.page = 1

				if (this.curNow == 1) {
					this.userPoorList()
				} else {
					this.userGoodsList()
				}
			},
			// 二级分类
			statusgo(e) {
				this.list = []
				this.status = e
				this.page = 1

				if (this.curNow == 1) {
					this.userPoorList()
				} else {
					this.userGoodsList()
				}
			},
			godetail(id) {
				if (this.curNow == 1) {
					uni.navigateTo({
						url: '/pagesA/userplay/detail?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/userplay/userdetail?id=' + id
					})
				}

			},
			// 用户奖池列表
			async userPoorList() {
				let _this = this
				let item = await this.$api.post('Usersys/userPoorList', {
					token: uni.getStorageSync('token'),
					page: _this.page,
					limit: 20,
					type: _this.type,
					status: _this.status,
				})
				this.list = this.list.concat(item.data.list)
				console.log(this.list)
			},
			// 用户商城列表
			async userGoodsList() {
				let _this = this
				// type=1时 		status = 1：全部 2： 我发布的
				// type=2时			status = 1：全部记录  2：我发布的  3：我参与的
				let item = await this.$api.post('shop/userGoodsList', {
					token: uni.getStorageSync('token'),
					page: _this.page,
					limit: 20,
					type: _this.type,
					status: _this.status,
				})
				this.list = this.list.concat(item.data.list)
			},
			gocreate(i) {
				let type = 0
				if (i == 1) {
					type = 2
				} else {
					type = 1
				}
				uni.navigateTo({
					url: '/pagesA/userplay/usercreate?id=' + type
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.typeon {
		color: #5C5C92;
	}

	.typeoff {
		color: #a1a1a1;
	}

	.rate {
		height: 25rpx;
		background-color: #dadada;
		border: 4rpx solid #fff;
		border-radius: 20rpx;
		display: flex;
		overflow: hidden;

		.rate_one {
			background-color: #08dab7;
			height: 100%;
			transition: .5s;
			flex-shrink: 0
		}

		.rate_two {
			height: 100%;
			background-color: #5E9D63;
			transition: .5s;
			max-width: 100%;
		}
	}

	.bagitem {
		margin-right: 15rpx;
	}

	.bagitem:nth-child(4n) {
		margin-right: 0;
	}

	.boxitem {
		background-color: rgba(255, 255, 255, .6);
	}

	.fixbtn {
		position: fixed;
		bottom: 150rpx;
		width: 40%;
		left: 30%;
		color: #fff;
		padding: 10rpx 18rpx 18rpx 18rpx;
		background-color: #5C5C92;
	}
</style>